<!--
  ~ Copyright [2021-2021] [ahoo wang <ahoowang@qq.com> (https://github.com/Ahoo-Wang)].
  ~ Licensed under the Apache License, Version 2.0 (the "License");
  ~ you may not use this file except in compliance with the License.
  ~ You may obtain a copy of the License at
  ~      http://www.apache.org/licenses/LICENSE-2.0
  ~ Unless required by applicable law or agreed to in writing, software
  ~ distributed under the License is distributed on an "AS IS" BASIS,
  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  ~ See the License for the specific language governing permissions and
  ~ limitations under the License.
  -->

<form  nzLayout="horizontal" nz-form [formGroup]="addForm" (ngSubmit)="addUser()">
  <nz-form-item>
    <nz-form-control nzErrorTip="Please input Username!">
      <nz-input-group nzPrefixIcon="user" nzSize="large">
        <input type="text" nz-input formControlName="username" [(ngModel)]="username" placeholder="Username"/>
      </nz-input-group>
    </nz-form-control>
  </nz-form-item>
  <nz-form-item>
    <nz-form-control nzErrorTip="Please input Password!">
      <nz-input-group nzPrefixIcon="lock" nzSize="large">
        <input type="password" nz-input formControlName="password" [(ngModel)]="password" placeholder="Password"/>
      </nz-input-group>
    </nz-form-control>
  </nz-form-item>
  <nz-divider nzText="Bind Role"></nz-divider>
  <nz-form-item>
    <nz-form-control nzErrorTip="Please bind role!">
      <nz-select
        nzSize="large"
        nzMode="multiple"
        nzPlaceHolder="Please bind role!"
        formControlName="roleBind"
        [(ngModel)]="roleBind"
      >
        <nz-option *ngFor="let item of roles" [nzLabel]="item.name" [nzValue]="item.name"></nz-option>
      </nz-select>
    </nz-form-control>
  </nz-form-item>
  <button nz-button nzType="primary" [disabled]="!addForm.valid" nzSize="large" nzBlock>Add User</button>
</form>
